<!-- 实物奖品列表 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{ searchData = {}; gzThreeRef.clear() }" searchConditionNum="6">
        <a-form-item class="table-search-item" label="商品名称">
          <a-input v-model:value="searchData['goodsName']" :placeholder="'商品名称'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="机构号">
          <GzTreeSelect ref="gzThreeRef" v-model:value="searchData['agentNo']" :isNeedDefault="false" />
        </a-form-item>
        <a-form-item class="table-search-item" label="奖品状态">
          <a-select v-model:value="searchData['state']" :placeholder="'状态'">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">草稿</a-select-option>
            <a-select-option :value="1">配置中</a-select-option>
            <a-select-option :value="2">配置完成</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item" label="批次号">
          <a-input v-model:value="searchData['batchNo']" :placeholder="'批次号'" />
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_VIRTUAL_COUPON_INFO_ADD')" type="primary" @click="addOrEditFunc(false)">
            <plus-outlined />新建
          </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'goodsNum'">
            {{ record.goodsNum==0&&record.goodsGet==0 ? '--': (record.goodsNum || 0) + '/' + (record.goodsGet || 0) }}
          </template>
          <template v-if="column.key == 'goodsImgListSmall'">
            <a-image :src="record.goodsImgListSmall" />  
          </template>
          <template v-if="column.key === 'isLimitUser'">
            <template v-if="record.isLimitUser==0">否</template>
            <template v-if="record.isLimitUser==1">实名客户</template>
            <template v-if="record.isLimitUser==2">月资产等级客户</template>
            <template v-if="record.isLimitUser==3">季资产等级客户</template>
          </template>
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 0" text="草稿" />
            <a-badge v-else-if="record.state == 1" text="配置中" />
            <a-badge v-else-if="record.state == 2" text="配置完成 " />
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button v-if="$access('ENT_VIRTUAL_COUPON_INFO_EDIT')&&record.state != 2" type="link" @click="addOrEditFunc(record)">修改</a-button>
              <a-button v-if="$access('ENT_VIRTUAL_COUPON_INFO_EDIT') && record.state == 2" type="link" @click="stateChange(record)">下线</a-button>
              <a-button v-if="$access('ENT_VIRTUAL_COUPON_INFO_DEL')" type="link" danger @click="virtualDelete(record)">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增实物奖品 -->
    <AddOrEdit ref="addOrEditRef" :callbackFunc="() => infoTableRef.refTable()" />
    <!-- 详情 -->
    <!-- <Detail ref="detailRef"/> -->
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { $virtualList,$virtualState,$virtualDelete} from '@/api/awardMange/virtualCoupon/index'
import AddOrEdit from './AddOrEdit.vue'
// import Detail from './Detail.vue'
import { ref, reactive, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const gzThreeRef = ref()
const addOrEditRef = ref()
const detailRef = ref()

const infoTableRef = ref()
let tableColumns = reactive([
  { key: 'batchNo', title: '批次号', dataIndex: 'batchNo',fixed: 'left', width: 140, minWidth: 140, maxWidth: 250 },
  { key: 'agentNo', title: '归属机构号', dataIndex: 'agentNo', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'agentName', title: '归属机构名称', dataIndex: 'agentName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'goodsName', title: '商品名称', dataIndex: 'goodsName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'goodsImgListSmall', title: '商品图片', dataIndex: 'goodsImgListSmall', width: 140, minWidth: 140, maxWidth: 170 },
   { key: 'goodsNum', title: '总数量/已领取数量', dataIndex: 'goodsNum', width: 170, minWidth: 170, maxWidth: 220 },

  { key: 'state', title: '状态', dataIndex: 'state', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'activityName', title: '已配置活动', dataIndex: 'activityName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData:any = ref({})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $virtualList (params)
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}
/**
 * 新增OR修改
 * @param record 当前记录
 * @param disabled 是否限制修改内容 默认false 不限制
 * @param virtualCouponNum 最小数量 默认1
 */
function addOrEditFunc(record,disabled = false, virtualCouponNum = 1){
  addOrEditRef.value.show(record.virtualId,disabled,virtualCouponNum)
}


// 修改奖品状态
function stateChange(record){
    $infoBox.confirmDanger('确认下线？', '请确认是否关闭当前奖品状态？', () => {
      $virtualState({ virtualId: record.virtualId, state: 1 }).then(res => {
        $infoBox.message.success('下线成功')
        infoTableRef.value.refTable()
      })
    })
  
}

// 详情
function detailFunc(virtualId){
  detailRef.value.show(virtualId)
}

// 删除卡券
function virtualDelete(record:any){
  $infoBox.confirmDanger('确认删除？', '请确认是否删除当前奖品？', () => {
    $virtualDelete({virtualId:record.virtualId}).then(res => {
      $infoBox.message.success('删除成功！')
      infoTableRef.value.refTable()
    })
  })
}

</script>
